<template>
	<el-main>
		<el-row type="flex" justify="space-around" style="margin-top: 24px;">
			<el-col class="hidden-md-and-down" :sm="12" :md="12" :lg="12">
				<img src="../assets/images/404.png" alt="404" style="width: 100%;">
			</el-col>
			<el-col :sm="12" :md="12" :lg="12">
				<div class="error-title">
					404
				</div>
				<h1 class="error-desc">
					Page Not Found
				</h1>
				<el-button type="primary" @click="$router.push('/')">
					返回主页
				</el-button>
			</el-col>
		</el-row>
	</el-main>
</template>

<script>
	export default {
		name: "ErrorPage"
	}
</script>

<style scoped="scoped">
	.el-row {
		text-align: center;
		padding: 20px 10%;
	}
	.error-title {
		color: #409EFF;
		font-size: 48px;
		font-weight: bold;
		padding-top: 20px;
	}
	.error-desc {
		font-size: 26px;
		font-weight: bold;
	}
</style>